<template>
  <div class="about-us">
    <!-- 顶部横幅 -->
    <div class="banner">
      <h1>关于我们</h1>
      <p>基于YOLO的智能厨房违规行为检测系统</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 项目简介 -->
      <section class="section company-intro">
        <h2>项目简介</h2>
        <p>本项目是大学生创新创业项目，旨在利用深度学习技术中的YOLO（You Only Look Once）目标检测模型，实现对厨房违规行为的智能识别和预警。通过计算机视觉技术，我们致力于提升餐饮行业的安全管理水平，为食品安全保驾护航。</p>
      </section>

      <!-- 项目愿景 -->
      <section class="section mission">
        <h2>项目愿景</h2>
        <p>我们期望通过技术创新，将人工智能技术应用于餐饮安全领域，打造一个高效、准确、实时的厨房违规行为检测系统。通过持续优化YOLO模型，提高检测准确率，为餐饮企业提供智能化的安全管理解决方案。</p>
      </section>

      <!-- 核心优势 -->
      <section class="section advantages">
        <h2>核心优势</h2>
        <div class="advantage-cards">
          <div class="card">
            <i class="el-icon-monitor"></i>
            <h3>YOLO检测</h3>
            <p>采用先进的YOLO目标检测算法，实时识别违规行为</p>
          </div>
          <div class="card">
            <i class="el-icon-data-analysis"></i>
            <h3>深度学习</h3>
            <p>基于深度学习的模型训练，持续提升检测准确率</p>
          </div>
          <div class="card">
            <i class="el-icon-s-operation"></i>
            <h3>智能预警</h3>
            <p>实时预警系统，及时发现并提醒违规行为</p>
          </div>
        </div>
      </section>

      <!-- 团队介绍 -->
      <section class="section team">
        <h2>我们的团队</h2>
        <div class="team-members">
          <div class="member">
            <div class="avatar"></div>
            <h3>算法团队</h3>
            <p>专注于YOLO模型优化与训练</p>
          </div>
          <div class="member">
            <div class="avatar"></div>
            <h3>开发团队</h3>
            <p>负责系统架构与功能实现</p>
          </div>
          <div class="member">
            <div class="avatar"></div>
            <h3>测试团队</h3>
            <p>确保系统稳定性和准确性</p>
          </div>
        </div>
      </section>

      <!-- 联系我们 -->
      <section class="section contact">
        <h2>联系我们</h2>
        <div class="contact-info">
          <p><i class="el-icon-message"></i> 邮箱：1366368016@qq.com</p>
          <p><i class="el-icon-location"></i> 地址：江南大学计算机科学与技术学院</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutUs'
}
</script>

<style lang="less" scoped>
.about-us {
  .banner {
    height: 300px;
    background: linear-gradient(135deg, #579684 0%, #36cfc9 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;

    h1 {
      font-size: 48px;
      margin-bottom: 20px;
    }

    p {
      font-size: 20px;
      opacity: 0.9;
    }
  }

  .content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;

    .section {
      margin-bottom: 60px;

      h2 {
        font-size: 32px;
        color: #333;
        margin-bottom: 30px;
        text-align: center;
      }
    }

    .company-intro, .mission {
      p {
        font-size: 16px;
        line-height: 1.8;
        color: #666;
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
      }
    }

    .advantage-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      margin-top: 40px;

      .card {
        padding: 30px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
        }

        i {
          font-size: 40px;
          color: #1890ff;
          margin-bottom: 20px;
        }

        h3 {
          font-size: 20px;
          margin-bottom: 15px;
          color: #333;
        }

        p {
          color: #666;
          line-height: 1.6;
        }
      }
    }

    .team-members {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 30px;
      margin-top: 40px;

      .member {
        text-align: center;

        .avatar {
          width: 120px;
          height: 120px;
          background: #f0f2f5;
          border-radius: 50%;
          margin: 0 auto 20px;
        }

        h3 {
          font-size: 18px;
          margin-bottom: 10px;
          color: #333;
        }

        p {
          color: #666;
          line-height: 1.6;
        }
      }
    }

    .contact-info {
      text-align: center;
      max-width: 600px;
      margin: 0 auto;

      p {
        margin: 15px 0;
        font-size: 16px;
        color: #666;

        i {
          margin-right: 10px;
          color: #1890ff;
        }
      }
    }
  }
}
</style>